<template>
  <a-card class="card">
    <a-list item-layout="horizontal" :data-source="data.arr">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta description="这家伙很懒，什么也没留下~">
            <template #title>
              <span> {{ userName }}</span>
            </template>
            <template #avatar>
              <a-avatar :src="userImg" />
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";
import { useStore } from "vuex";
import userImg from "@/assets/img/user.png";
const store = useStore();
const userName = computed(() => store.getters.username);
const data = reactive<any>({
  arr: [
    {
      title: "admin",
    },
  ],
});
</script>

<style scoped lang="less">
.card {
  height: 70vh;
  background: url("@/assets/img/layoutBg.png") no-repeat;
  background-size: cover;
  background-position: center;
  
}
</style>
